<template>
  <div :class="$style.home" v-analytics.pageview>
    <download-bar category="M-Home Page" />
    <div
      :class="$style.orderBar"
      v-sticky
      v-analytics.click="{
        action: 'Orders Click',
        category: 'M-Home Page',
      }"
    >
      <router-link to="/orderResult" v-if="logined">Orders</router-link>
    </div>
    <goodsTheme :themeId="themeId" />
    <div :class="$style.suspendModal" @click="suspendModalClick" v-if="showSuspendModal">
      <icon name="close" @click="suspendModalClose" />
    </div>
    <coupon-modal
      :show="popupModal"
      :certificateData="certificateData"
      v-analytics.click="{
        action: 'Pop-ups Show',
        category: 'M-Home Page',
      }"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { downloadBar, icon } from 'components'
import { auth } from 'utils'
import goodsTheme from '../goodsTheme/goodsTheme'
import couponModal from './couponModal'

export default {
  name: 'home',
  components: {
    goodsTheme,
    downloadBar,
    couponModal,
    icon,
  },
  computed: {
    ...mapState({
      certificateData: state => state.coupon.certificateData,
      popupModal: state => state.coupon.popupModal,
    }),
  },
  data() {
    const isProd = process.env.NODE_ENV === 'production'
    return {
      checkVal: [],
      showSku: false,
      showCouponModal: false,
      showSuspendModal: true,
      logined: auth.isLogin(),
      themeId: isProd ? '10098' : '10056',
    }
  },
  methods: {
    suspendModalClick() {
      this.$router.push({
        path: 'signUpGetCoupon',
        query: { activityId: 1890474 },
      })
    },
    suspendModalClose(e) {
      e.preventDefault()
      e.stopPropagation()
      this.showSuspendModal = false
    },
  },
}
</script>

<style module lang="scss">
.orderBar {
  width: 100%;
  line-height: 48px;
  background-image: url('assets/goodsTheme/done.png');
  background-size: 100% 100%;
  font-size: 16px;
  text-align: right;
  padding-right: 12px;
  border-bottom: 1px solid #e7e7e7;
  @media (-webkit-min-device-pixel-ratio: 2) {
    border-width: .5px;
  }
  span {
    display: inline-block;
    height: 100%;
  }
}

.suspendModal {
  width: 80px;
  height: 80px;
  // background-color: rgba(0, 0, 0, .45);
  position: fixed;
  top: 280px;
  right: 4px;
  background-image: url('assets/icons/prize.png');
  background-size: 100% 100%;
  :global {
    .v-icon-wrapper {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 0;
      line-height: 20px;
      top: 0;
      color: #fff;
      background: rgba(0,0,0,0.45);
      text-align: center;
      border-radius: 50%;
    }
    .iconfont {
      font-size: 14px;
    }
  }
}
</style>
